<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生主页</title>
<!-- 引入jQuery.js文件 -->
<script type="text/javascript" src="../static/jquery-easyui-1.4.1/jquery.js"></script>
<link rel="stylesheet" href="../static/jquery-easyui-1.4.1/themes/gray/easyui.css">
<!-- 引入easyui小图标文件  -->
<link rel="stylesheet" href="../static/jquery-easyui-1.4.1/themes/icon.css">
<script type="text/javascript"src="../static/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="../static/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){
		//datagrid数据表格
		$('#t_tbclass').datagrid({
			idField:'id', //只要创建数据表格必须要加idField
			striped:true, //隔行变色
			url:'list', //异步加载数据路径
			//title:'数据表格', //表头
			width:'100%', //宽度
			fitColumns: true, //自动宽度
			height:645, 
			loadMsg: '数据正在加载...请耐心等待....', //在从远程站点加载数据的时候显示提示消息
			rownumbers: true, //在表格前面显示行号
			nowrap:true, //折行显示
			//singleSelect:true, //只允许选中一行
			remoteSort:false, //取消本地排序
			frozenColumns:[ //冻结列，不能与fitColums一起使用
				[
					{
						field:'ck',
						width:50,
						checkbox:true //复选框 与singleSelect冲突
					}
				]
			],
			columns:[
				[	
					{
						field:'classname',
						title:'班级名',
						width:120,
						align:'center',
						sortable:true //允许列使用排序
					},{
						field:'teachername',
						title:'班主任',
						width:120,
						align:'center'
					}
				]
			],
			pagination:true, //设置分页
			pageSize:10, //设置开始显示几条数据
			pageList:[10,20,25,50 ], //设置分页条数
			toolbar:[
				{
					text:'新增班级',
					iconCls:'icon-add', //小图标
					handler:function(){
						$('#myform').form('clear'); //清空表单数据
						$('#mydialog').dialog({ //动态生成表头
							title:'新增班级',
						 });
						$('#mydialog').dialog('open');
					}
				},{
					text:'修改信息',
					iconCls:'icon-edit', 
					handler:function(){
						var arr =  $('#t_tbclass').datagrid('getSelections'); //返回选中记录
						//判断是否选择一条记录或多条或未选
						if(arr.length == 0){
							 $.messager.show({
									title:'提示信息!',
									msg:'您还未选择要修改的数据！每次只能修改一条数据哟！',
									height:180,
									width:220
								 });
						 }else if(arr.length != 1){ 
							 $.messager.show({
								title:'提示信息!',
								msg:'每次只能选择一条数据进行修改！',
								height:180,
								width:220
							 });
						 }else{
							 $('#mydialog').dialog({ //动态生成表头
									title:'修改信息',
							 	});
							 $('#mydialog').dialog('open'); //打开窗口
							 $('#myform input').val(""); //清空表单数据
							 
							 //重写数据
							 $('#myform').form('load',{
								 id:arr[0].id,
								 classname:arr[0].classname,
								 teachername:arr[0].teachername
							 });
							 
						 }
					}
				},{
					text:'删除班级',
					iconCls:'icon-remove',
					handler:function(){
					var arr = $('#t_tbclass').datagrid('getSelections');
					if(arr.length <= 0){
						$.messager.show({
							title:'提示信息!',
							msg:'至少选择一条数据进行删除',
							height:180,
							width:220
						});
					}else{
						$.messager.confirm('提示信息','确认删除？',function(r){
							if(r){
								 //批量删除
								var ids = '';
								for(var i = 0;i < arr.length;i++){
									ids += arr[i].id+',';
								}
								ids = ids.substring(0 , ids.length - 1);
								$.post('delete',{ids:ids},function(result){
									//1.刷新数据表格
									$('#t_tbclass').datagrid('reload');
									//2.清空idField
									$('#t_tbclass').datagrid('unselectAll');
									//3.提示信息
									$.messager.show({
										title:'提示信息!',
										msg:'操作成功！',
										height:180,
										width:220
									});
									
								});	
							}else{
								return;
							}
						});
						}
					}
				}
			]
		});
		
		//提交表单方法
		$('#btn1').click(function(){
			if($('#myform').form('validate')){
				$.ajax({
					type:'post', //提交方式
					url:'save', //请求地址
					cache : false, //清除缓存
					data : $('#myform').serialize(), //序列化表单
					//dataType:'json', //返回数据格式
					success : function(result) {
						//1.关闭窗口
						$('#mydialog').dialog('close');
						//2.刷新datagrid 保持在当前页
						$('#t_tbclass').datagrid('reload');
						//3.提示信息
						$.messager.show({
							title : '提示信息!',
							msg : '操作成功！',
							height : 180,
							width : 220
						});
					}
				});
			} else {
				$.messager.show({
					title : '提示信息!',
					msg : '数据验证不通过，不能保存！',
					height : 180,
					width : 220
				})
			}
		});

		//关闭窗口
		$('#btn2').click(function() {
			$('#mydialog').dialog('close');
		});
		//查询
		$('#searchbtn').click(function() {
			$('#t_tbclass').datagrid('load', serializeForm($('#mysearch')));
		});
		//清空查询
		$('#clearbtn').click(function() {
			$('#mysearch').form('clear'); //清空表单数据
			$('#t_tbclass').datagrid('load', { //重新刷新表格
			//将班级id传入后台
			});
		});
	});

	//js方法：序列化表单
	function serializeForm(form) {
		var obj = {};
		$.each(form.serializeArray(), function(index) {
			if (obj[this['name']]) {
				obj[this['name']] = obj[this['name']] + ',' + this['value'];
			} else {
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	};
	
	//空格校验器
	$.extend($.fn.validatebox.defaults.rules, {    
	     isBlank: {
	         validator: function (value, param) { return $.trim(value) != '' },
	         message: '请勿输入纯空格！'
	     }
	});

</script>

</head>
<body>
	<div id="lay"  fit=true style="width: 100%;height: 100%;">
		<div region="north" title="班级查询" style="height:26px;" >
			<form id="mysearch" method="post">
				 <div class="input_container">
				 	<input class="easyui-textbox" label="班级名称" labelPosition="top" data-options="prompt:'请输入班级名称',iconCls:'icon-user3'" style="width:200px;height:26px;" name="classname">
				 	&nbsp;
				 	<input class="easyui-textbox" label="班主任" labelPosition="top" data-options="prompt:'请输入班主任名称',iconCls:'icon-user'" style="width:200px;height:26px;" name="teachername">
				 	&nbsp;
				 	<a id="searchbtn" class="easyui-linkbutton" iconCls='icon-search'>查询</a>
					<a id="clearbtn" class="easyui-linkbutton" iconCls='icon-undo'>清空</a>
				 </div>
			</form>
		</div>
		<div region="center">
			<table id="t_tbclass"></table>
		</div>
	</div>
	
	<div id="mydialog" class="easyui-dialog" style="width:250px;" closed=true modal=true draggable=false title="新增班级">
		<form id ="myform" action="" method="post">
			<input type="hidden" name="id" value=""/>
			<table class="input_container">
				<tr>
					<td>
						<label for="classname">班级名称</label>
					</td>
					<td>
						<input type="text" class="easyui-validatebox easyui-textbox" name="classname" id="classname" required=true validType="isBlank" missingMessage="班级名必填！" style="width: 170px;">
					</td>
				</tr>
				<tr>
					<td>
						<label for="teachername">班主任</label>
					</td>
					<td>
						<input type="text"name="teachername" id="teachername" class="easyui-validatebox easyui-textbox" required=true validType="isBlank" missingMessage="教师名必填！"style="width: 170px;">
					</td>
				</tr>
				<tr style="text-align:right;">
					<td colspan="2">
						<a class="easyui-linkbutton" id="btn1" iconCls='icon-save'>确定</a>
						<a class="easyui-linkbutton" id="btn2" iconCls='icon-undo'>关闭</a>
					</td>
				</tr>
			</table>			
		</form>
	</div>
</body>
</html>